<template>
  <!-- 预览保存 -->
  <div class="model-title">
    <div>商城装修</div>
    <div class="btns">
      <el-button @click="clickBtn(item)" size="small" v-for="(item, index) in way" :key="index"
                 :type="item.selected ? 'primary' : ''">
        {{ item.title }}
      </el-button>
    </div>
    <div class="model-title-view-btn">
      <!-- TODO 后期会补全 目前版本暂无 -->
      <!-- <Poptip placement="bottom" width="100">
        <Button size="default" @click="creatQrCode">预览模板</Button>
        <div slot="content" class="default-view-content">
          <div>临时预览</div>
          <div ref="qrCodeUrl"></div>
        </div>
      </Poptip> -->
      <el-button size="mini" type="danger" @click="handleSpinShow">保存模板</el-button>

      <el-dialog :visible.sync="saveDialog" title="保存中" :closable="true" :mask-closable="false" :footer-hide="true"
                 width="20%" center>
        <el-form label-position="right" label-width="80px">
          <div>
            <el-form-item label="模板名称">
              <el-input v-model="submitWay.name"></el-input>
            </el-form-item>
            <el-form-item label="所属商家">
              <el-select v-model="submitWay.shopId" placeholder="所属商家" clearable class="filter-item"
                         style="width: 130px">
                <el-option v-for="item in shopOptions" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="立即发布">
              <el-switch v-model="submitWay.pageShow" active-value="1" inactive-value="0">
              </el-switch>
            </el-form-item>


            <el-form-item label="">
              <el-button size="mini" type="primary" @click="save()">保存</el-button>
            </el-form-item>
          </div>
          <!-- <el-form-item label="">
            <Progress  :percent="num" status="active" />
          </el-form-item> -->
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getFloorDataList,
  updateFloorData
} from '@/api/floor'
import {getShopSelector} from '@/api/shop'
export default {
  data() {
    return {
      shopOptions:[],
      progress: true, // 展示进度
      num: 20, // 提交进度
      saveDialog: false, // 加载状态
      way: [
        // 装修tab栏切换
        {
          title: "首页",
          name: "index",
          selected: true,
        },
        // {
        //   title: "全屏广告",
        //   name: "advertising",
        //   selected: false,
        // },
        // {
        //   title: "弹窗广告",
        //   name: "alertAdvertising",
        //   selected: false,
        // },
      ],

      submitWay: {
        // 表单信息
        pageShow: this.$route.query.type || 0,
        name: this.$route.query.name || "模板名称",
        pageClientType: "H5",
      },
    };
  },
  watch: {},
  created() {
    this.getShopSelector()
  },
  mounted() {
  },
  methods: {
    getShopSelector() {
      this.listLoading = true
      getShopSelector().then(response => {
        this.shopOptions = response.data
        this.listLoading = false
      })
    },
    clickBtn(val) {
      this.way.forEach((item, index) => {
        item.selected = false;
      });
      val.selected = true;
      this.$emit("selected", val.name);
    },

    /**
     * 加载，并保存模板
     */
    handleSpinShow() {
      this.saveDialog = true;
    },

    // 填写是否发布，模板名称之后保存
    save() {

      if (typeof(this.submitWay.shopId) == "undefined"){
        this.$message.error("请选择所属商家");
        return false;
      }
      if (this.$store.state.styleStore == void 0) {
        this.$message.error("请装修楼层");
        return false;
      }
      this.submitWay.pageData = JSON.stringify(this.$store.state.styleStore);
      this.submitWay.pageType = "INDEX";
      this.update();
    },

    // 更新
    update() {
      this.progress = false;
      updateFloorData({
        templateId: this.$route.query.id,
        pageData: JSON.stringify(this.$store.state.styleStore.list),
        name: this.submitWay.name,
        status: this.submitWay.pageShow,
        shopId:this.submitWay.shopId,
        type: this.$route.query.type,
        oriData: JSON.stringify(this.$store.state.styleStore)
      })
        .then((res) => {
          this.num = 50;
          if (res.code == 200) {
            this.num = 80;
            /**制作保存成功动画¸ */
            setTimeout(() => {
              this.saveDialog = false;
              this.$message.success("修改成功");
              this.goback();
            }, 1000);
          } else {
            this.saveDialog = false;
            this.$message.error("修改失败，请稍后重试");
          }
          console.log(res);
        })
        .catch((error) => {
        });
    },

    // 返回查询数据页面
    goback() {
      // 调用全局挂载的方法
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({
        path: "/floor/mobile",
      });
    },
  },
};
</script>
<style scoped lang="scss">
.model-item {
  width: 100%;
  padding: 10px 0;
  display: flex;
  align-items: center;

  > * {
    margin: 0 8px;
  }
}

.model-title {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-size: 14px;

  > .model-title-view-btn {
    > * {
      margin: 0 10px;
    }
  }
}

.btns {
  * {
    margin: 0 4px;
  }
}
</style>
